<template>
  <header>
    <a class="nav-logo" href="/">
      <h1>豆瓣</h1>
    </a>
    <nav class="nav">
      <ul>
        <li><a href="#/movie" style="color: #2384E8;">电影</a></li>
        <li><a href="#/book" style="color: #9F7860;">图书</a></li>
        <li><a href="#/status" style=" color: #E4A813;">广播</a></li>
        <li><a href="#/group" style="color: #2AB8CC;">小组</a></li>
      </ul>
      <span class="search"></span>
    </nav>
  </header>
</template>

<style lang="scss" scoped>
  header {
    padding: 12px 18px;
    border-bottom: 1px solid #f3f3f3;
  }

  .nav-logo {
    display: inline-block;
    text-decoration: none;
    font-size: 0;
    vertical-align: bottom;

    h1 {
      margin: 0;
      padding: 0;
      color: #00b600;
      font-size: 0;
      background-image: url('../assets/images/nav-logo.png');
      background-size: cover;
      height: 22px;
      width: 46px;
      display: inline-block;
      position: relative;
      top: 0;
    }
  }

  .nav {
    float: right;

    ul {
      margin: 0;
      padding: 0;
      display: inline-block;
    }

    li {
      display: inline-block;
      margin-right: 14px;
      font-size: 15px;

      a {
        text-decoration: none;
      }
    }
  }

  .search {
    background-image: url('../assets/images/search.png');
    width: 25px;
    height: 18px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
  }

</style>
